<template>
  <div id="content">
    <div class="top">
      <el-page-header @back="goBack" content="查找用户"> </el-page-header>
    </div>
    <div class="header" style="margin-top: 15px">
      <el-form :inline="true" :model="searchUserForm" class="demo-form-inline">
        <el-form-item>
          <el-input
            style="width: 250px"
            v-model="searchUserForm.keyword"
            placeholder="请输入要查询的关键字"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 5px">
          <el-button type="primary" @click="search" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="userList">
      <div
        class="header"
        v-for="(item, index) in usersList"
        :key="index"
        @click="getOtherUser(item.uid)"
      >
        <el-card style="width: 100%; height: 45px">
          <div class="header-left">
            <div class="avatar">
              <el-avatar
                size="medium"
                :src="'http://cdn.gdxywsw.club/' + item.avatar"
              ></el-avatar>
            </div>
            <div class="username_time">
              <div class="username">{{ item.nickname }}</div>
              <div class="time" v-if="item.description">
                <span>{{ item.description }}</span>
              </div>
            </div>
          </div>
          <div class="header-right">
            <template v-if="item.uid != myInfo.uid">
              <el-button
                type="info"
                size="mini"
                v-if="item.subscribe == 1 && item.fan == 1"
                >互相关注</el-button
              >
              <template v-else>
                <el-button
                  type="primary"
                  size="mini"
                  v-if="item.subscribe == 0"
                  @click="concernPeople(item.uid, index)"
                  >关注</el-button
                >
                <el-button
                  v-else
                  type="danger"
                  size="mini"
                  @click="cancelConcern(item.uid, index)"
                  >取关</el-button
                >
              </template>
            </template>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "search-user",
  data() {
    return {
      searchUserForm: {
        keyword: "",
      },
      usersList: [],
      page: 1,
      size: 20,
    };
  },
  computed: {
    ...mapState({
      myInfo: (state) => state.userInfo.userInfo,
    }),
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async search() {
      let result = await this.$API.reqSearchUser(
        this.page,
        this.size,
        this.searchUserForm.keyword,
        this.myInfo.uid
      );
      if (result.code == 2000) {
        this.usersList = result.data;
      }
    },

    //关注某人
    async concernPeople(uid = this.uid, index) {
      let result = await this.$API.reqConcernPeople(uid);
      if (result.code == 2000) {
        if (index === undefined) {
          this.isConcern = true;
        } else {
          this.$set(this.usersList[index], "subscribe", 1);
          // this.concernList[index].subscribe = 1;
        }
      }
    },
    //取关某人
    async cancelConcern(uid = this.uid, index) {
      let result = await this.$API.reqCancelConcern(uid);
      if (result.code == 2000) {
        if (index === undefined) {
          this.isConcern = false;
        } else {
          this.$set(this.usersList[index], "subscribe", 0);
        }
      }
    },

    // 查看发帖人信息
    getOtherUser(uid) {
      this.$router.push({ name: "myInfo", params: { uid } });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
/deep/ .el-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-top: 5px;
  .header-left {
    .avatar {
      margin: 3px;
    }
    display: flex;
    align-items: center;
    .username_time {
      .time {
        font-size: 12px;
      }
    }
  }
  .header-right {
    margin-top: 0px;
    margin-right: 5px;
  }
}
</style>